<template>
  <div id="home">
    <!-- 导航栏 -->
    <nav-bar class="home-nav">
      <!-- 只对于center插槽进行覆盖 -->
      <div slot="center">购物街</div>
    </nav-bar>

    <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        ref="tabControl1"
        class="tab-control"
        v-show="isTabFixed"
      ></tab-control>

    <scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll" :pullUpLoad="true" @pullingUp='loadMore'>
      <!-- 轮播图，把细节代码给封装出去 把banner通过props传递给HomeSwiper -->
      <home-swiper :banners="banners" @swiperImageLoad='swiperImageLoad'></home-swiper>
      <!-- 推荐栏 -->
      <home-recommend-view :recommends="recommends"></home-recommend-view>
      <!-- 功能图片 -->
      <home-feature-view></home-feature-view>
      <!-- Tab控制栏 -->
      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
        ref="tabControl2"
      ></tab-control>
      <!-- 商品列表展示 -->
      <goods-list
        class="goods-list"
        :goods="goods[currentType].list"
      ></goods-list>
    </scroll>

    <!-- 监听组件原生事件时，必须使用native -->
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper.vue";
import HomeRecommendView from "./childComps/HomeRecommendView.vue";
import HomeFeatureView from "./childComps/HomeFeatureView.vue";

import NavBar from "@/components/common/navbar/NavBar.vue";
import TabControl from "@/components/content/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import Scroll from "@/components/common/scroll/Scroll.vue";
import BackTop from '@/components/content/backTop/BackTop.vue';

import { getHomeMultidata, getHomeGoods } from "@/network/home";
import {debounce} from '@/common/utils'
import {itemListenerMixin} from "@/common/mixin"


export default {
  name: 'Home',
  components: {
    HomeSwiper,
    HomeRecommendView,
    HomeFeatureView,
    NavBar,
    TabControl,
    GoodsList,
    Scroll,
    BackTop,
  },
  data() {
    return {
      // result: null
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] }, //流行
        new: { page: 0, list: [] }, //新款
        sell: { page: 0, list: [] }, //精选
      },
      currentType: "pop",
      isShowBackTop: false,
      tabControlOffsetTop: 0,
      isTabFixed: false,
      saveY: 0
    };
  },
  mixins: [itemListenerMixin],
  created() {
    //在首页被创建时调用
    this.getHomeMultidata(),
      // 获取商品数据
      this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");

  },
  mounted() {
    // 调用防抖函数，执行refresh函数
    const refresh = debounce(this.$refs.scroll.refresh,100)

    this.itemImgListener = () => {
      refresh()
    }

    // 监听item中图片加载完成
    this.$bus.$on('itemImgListener',this.itemImgListener)
  },
  activated() { //在进入当前路由时，回到之前滑动高度位置
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh()
  },
  deactivated() { //在离开当前路由后，记录当前scroll所滑动的高度y
    this.saveY = this.$refs.scroll.scroll.y

    this.$bus.$off('itemImageLoad',this.itemImgListener)
  },
  methods: {
    // 防抖函数，防止多次连续网络请求，导致服务器压力过大
    // 这种功能性函数可以对其进行抽离，可以在多个页面进行使用
    // debounce(func,delay) {
    //   let timer = null
    //   return function(...args) {
    //     if(timer) {
    //       clearTimeout(timer)
    //     }
    //     timer = setTimeout(() => {
    //       func.apply(this,args)
    //     },delay)
    //   }
    // },

    // 通过点击不同tab按钮，把currentType改为相对于的类型
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl1.currentIndex = index
      this.$refs.tabControl2.currentIndex = index
    },

    backClick() {
      // 通过this.$refs.scroll拿到scroll组件，然后再scroll是拿到scroll组件中的scroll对象
      // scrollTo方法是可以滑动，滑到x,y位置，通过多少秒
      // this.$refs.scroll.scroll.scrollTo(0,0,300)

      // 也可以再Scroll组件中封装一个scrollTo方法
      this.$refs.scroll.scrollTo(0,0,300)
    },

    contentScroll(position) {
      this.isShowBackTop = Math.abs(position.y) > 1000

      this.isTabFixed = Math.abs(position.y) > this.tabControlOffsetTop
    },

    loadMore() {
      this.getHomeGoods(this.currentType)
    },

    swiperImageLoad() {
      // tabControl吸顶效果
      this.tabControlOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },

    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        // console.log(res.data.banner.list);
        // this.result = res //把请求过来的数据保存到data中，不会因为函数执行完被回收
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      // 刚刷新时，先把页数+1
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        // 把请求来的商品数据加入到相对应的商品列表中
        this.goods[type].list.push(...res.data.list);
        this.goods[type].page += 1;

        // 在结束完一次上拉加载更多后，应该结束当前下拉加载，以便下次还能够继续调用pullingUp
        this.$refs.scroll.finishPullUp()
      });
    }
  },
};
</script>

<style scoped>
#home {
  /* padding-top: 44px; */
  height: 100vh;
  position: relative;
}

/* 因为只有home中的nav才有专属的背景颜色，所以单独设置 */
.home-nav {
  /* position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9; */
   color: #fff;
  background-color: var(--color-tint);
}

.tab-control {
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.content {
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
